<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="color: #007AFF; font-size: 20px;">
        上传商品
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="formValidate.storeName"></el-input>
        </el-form-item>
		<el-form-item label="商品介绍">
		  <el-input v-model="formValidate.storeInfo"></el-input>
		</el-form-item>
		<el-form-item label="商品单位">
		  <el-input v-model="formValidate.unitName"></el-input>
		</el-form-item>
		<el-form-item label="关键字">
		  <el-input v-model="formValidate.keyword"></el-input>
		</el-form-item>
		<el-form-item label="商品价格">
		  <el-input v-model="formValidate.attrValue.price"></el-input>
		</el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="formValidate.region1" placeholder="请选择类型">
            <el-option label="家用电器" value="shanghai"></el-option>
            <el-option label="数码产品" value="beijing"></el-option>
          </el-select>
        </el-form-item>
		<el-form-item label="运费模块">
		  <el-select v-model="formValidate.region2" placeholder="请选择">
		    <el-option label="全国包邮" value="shanghai"></el-option>
		    <el-option label="部分包邮" value="beijing"></el-option>
			<el-option label="不包邮" value="beijing"></el-option>
		  </el-select>
		</el-form-item>
        <el-form-item label="商品照片">
			<el-upload
			  action="http://localhost:8080/api/admin/upload/image?model=maintain&pid=0"
			  list-type="picture-card"
			  :on-preview="handlePictureCardPreview"
			  :on-remove="handleRemove">
			  <i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="image" alt="">
			</el-dialog>
        </el-form-item>
		<el-form-item label="轮播图">
			<el-upload
			  action="http://localhost:8080/api/admin/upload/image?model=maintain&pid=0"
			  list-type="picture-card"
			  :on-preview="handlePictureCardPreview"
			  :on-remove="handleRemove">
			  <i class="el-icon-plus"></i>
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
			  <img width="100%" :src="image" alt="">
			</el-dialog>
		</el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="formValidate.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
	import request from "@/utils/request.js"
  export default {
    data() {
      return {
		formValidate: {
			image: 'http://localhost:9999/crmebimage/maintain/2021/09/08/2edec732f46d499ea084150b405c637c96u12kaog3.jpg',
			sliderImages: ["http://localhost:9999/crmebimage/maintain/2021/09/03/408ea05906c04c05824e8e48aef461c5lzdzjzni3x.png"],
			sliderImage: '',
			storeName: '华为',
			storeInfo: '有点东西',
			keyword: '华为',
			cateIds: [297], // 商品分类id
			cateId: 297, // 商品分类id传值
			unitName: '件',
			sort: 1,
			isShow: 1,
			giveIntegral: 1,
			ficti: 3,
			isShow: false,
			isBenefit: true,
			isNew: true,
			isGood: true,
			isHot: true,
			isBest: true,
			tempId: 1,
			attrValue: [{
				image: 'http://localhost:9999/crmebimage/maintain/2021/09/08/2edec732f46d499ea084150b405c637c96u12kaog3.jpg',
				price: 6600,
				cost: 555,
				otPrice: 5500,
				stock: 0,
				barCode: '',
				weight: 0,
				volume: 0
	    }],
	    attr: [],
	    selectRule: '',
	    isSub: false,
	    content: '<p>哈哈发挥好</p>',
	    specType: false,
	    id: 0,
	    couponIds: [],
	    coupons: [],
	    activity: ['默认','秒杀','砍价','拼团']
	  }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
		console.log(this.$data.formValidate);
		request.post("upload",this.$data.formValidate, { noAuth : true })
		// setTimeout(()=>{
		// 	uni.switchTab({
		// 		url: '/pages/user/index'
		// 	});
		// })
      },
	  handleRemove(file, fileList) {
	      console.log(file, fileList);
	  },
	  handlePictureCardPreview(file) {
	      this.image = file.url;
	      this.dialogVisible = true;
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>